import { 
  createSlice,createAsyncThunk,createEntityAdapter,
  createSelector,
 } from "@reduxjs/toolkit";
import { client } from "../../api/client";
// RTK 查询高级模式
import apiSlice from "../api/apiSlice";


const usersAdapter = createEntityAdapter();
const initialState = usersAdapter.getInitialState();

// const initialState = [
//   { id: 1001, name: "天下1" },
//   { id: 1002, name: "天下2" },
//   { id: 1003, name: "天下3" },
// ];


const usersSlice = createSlice({
  name: "users",
  initialState,
  reducers: {},
  extraReducers(builder) {
    // builder.addCase(fetchUsers.fulfilled, (state, action) => {
    //     //return action.payload;
    // });
    builder.addCase(fetchUsers.fulfilled, usersAdapter.setAll)
  },
});

export const fetchUsers = createAsyncThunk("users/fetchUsers", async () => {
  const response = await client.get("/fakeApi/users");
  return response.data;
});

//export const selectAllUsers = (state) => state.users;

//export const selectUserById = (state, userId) => state.users.find((user) => user.id === userId);

// export const {
//   selectAll: selectAllUsers,
//   selectById: selectUserById,
// } = usersAdapter.getSelectors((state) => state.users)

// RTK 查询高级模式
// 创建了一个选择器，用于从Redux store中获取getUsers API端点的查询结果
// apiSlice是RTK Query生成的API切片，endpoints.getUsers.select()返回一个选择器函数，
// 用于获取特定的查询状态（包括数据、加载状态、错误等）
const selectUserResult = apiSlice.endpoints.getUsers.select();
// console.log('selectUserResult',selectUserResult)

// selectAllUsers选择器，从getUsers查询结果中提取实际的用户数据数组。
// 只有当selectUserResult返回值发生变化时，才会重新计算结果，避免不必要的渲染。
export const selectAllUsers = createSelector(
  selectUserResult,
  (usersResult) => usersResult?.data ?? []
)

// selectUserById选择器，根据用户列表筛选单个用户。
// 只有当用户列表或userId发生变化时，才会重新计算结果。
export const selectUserById = createSelector(
  selectAllUsers,
  (state,userId) => userId,
  (users,userId) => users.find((user)=> user.id === userId ) 
)

// selectAllUsers： 安全地获取用户数据列表，处理数据不存在的情况
// selectUserById： 根据ID高效地查找单个用户，利用记忆化避免重复计算。

// 通过使用createSelector，代码实现了性能优化，确保只有在相关数据真正变化时才会重新计算结果。

export const extendedApiSlice = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => "/users",
      // 我们在getUsers请求接口添加了一个transformResponse选项。它接收整个响应数据体作为其参数，并应返回要缓存的实际数据。
      // 通过调用usersAdapter.setAll(initialState,responseData),它将返回标准的{ ids: [],entities: {}} 归一化数据结构，
      // 包含所有接收到的项目。
      transformResponse: (responseData) => {
        return usersAdapter.setAll(initialState,responseData)
      }
    })
  })
})


export const { useGetUsersQuery } = extendedApiSlice;

export const selectUsersResult = extendedApiSlice.endpoints.getUsers.select();

// const selectUsersData = createSelector(
//   selectUsersResult,
//   (usersResult) => usersResult.data
// );

// export const { 
//   selectAll: selectAllUsers,
//   selectById: selectUserById 
// } = usersAdapter.getSelectors((state) => selectUsersData(state) ?? initialState);


export default usersSlice.reducer;